<template>
  <div class="screen-right">
    <div class="screen-right-dv0">{{ data.标题 }}</div>

    <div class="screen-right-dv1">
      <screen-block :title="data.右上.标题">
        <right-top :data="data.右上"/>
      </screen-block>
    </div>
    <div class="screen-right-dv2">
      <screen-block :title="data.右下.标题">
        <right-bottom :data="data.右下"/>
      </screen-block>
    </div>
  </div>
</template>
<script>
import screenBlock from './screen-block'
import rightTop from './right/right-top'
import rightBottom from './right/right-bottom'

export default {
  name: 'screen-right',
  components: {
    screenBlock,
    rightTop,
    rightBottom
  },
  props: {
    data: Object
  },
  data() {
    return {}
  },
  methods: {},
  mounted() {
  }
}
</script>
<style scoped lang="scss">
.screen-right {
  width: 25%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  &-dv0 {
    font-size: 24px;
    font-weight: bold;
    text-align: right;
  }
  &-dv1 {
    height: 51%;
  }

  &-dv2 {
    height: 42%;
  }

}
</style>
